<!--
 * @docName: accountWithdrawal.vue
 * @Author: mwl
 * @Date: 16:25
 * @LastEditors: mwl
 * @LastEditTime: 16:25
-->
<template>
  <div class='content'>
    <div class='title'>账户提现</div>

    <div class='container-div'>
      <div class='container-title'>
        请前往：
        <span v-if='protocolType == 1'>
          <a-button @click="withdrawalEventFun(protocolType)" type='primary'>渠道账户提现</a-button>
          （账户余额：<span class='balance'>{{ Math.round(balance * 100)/10000 }} </span>元）
        </span>
        <a-button v-else-if='protocolType == 2' @click="withdrawalEventFun(protocolType)" type='primary'>前往企业账户提现</a-button>
      </div>
    </div>

    <!--提现弹层-->
    <a-modal
      width='700px'
      title="账户提现"
      :visible="visible"
      :footer="false"
      :destroyOnClose="true"
      @cancel="handleCancel"
    >
      <div v-if='infoDetails'>
        <div class='modal-content'>
          <div class='bank-card-info'>
              <div class='left'>到账银行卡</div>
              <div class='right'>
                <div><a-icon type="credit-card" theme="filled" style='color:#4266e5; margin-right: 10px;' />招商银行</div>
                <div class='text'>2小时到账</div>
              </div>
          </div>
          <div>
            <a-form-model
              ref="ruleForm"
              :model="form"
              :rules="validatorRules"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              style='padding: 30px 0;box-sizing: border-box;'
            >
              <a-form-model-item label="提现金额" prop="withdrawAmount">
                <a-input class='s' v-model="form.withdrawAmount" type="number">
                  <a-icon slot="prefix" type="property-safety" style=' color: #aaa;font-size: 24px;margin-right: 10px;margin-top: -6px' />
                </a-input>
              </a-form-model-item>
              <a-form-model-item label="支付密码" prop="password">
                <a-input-password allow-clear v-model="form.password" :autoComplete="autoCom" :type='inputType' @change="changeInputType" />
              </a-form-model-item>
              <div>当前账户余额 <span class='balance-span'>{{ Math.round(balance * 100)/10000 }}</span> 元
                <a-button type="link" class='balance-span-link' @click='withdrawalCopy()'>
                全部提现
              </a-button></div>
            </a-form-model>
          </div>
        </div>
        <div class="main_footer">
          <a-button type="primary" @click="confirmWithdrawal()">确认提现</a-button>
        </div>
      </div>
      <div v-else>
        <a-empty>
          <span slot="description">您尚未绑定银行账户，请先绑定账户！</span>
        </a-empty>
        <div class="main_footer">
          <a-button type="primary" @click="goTo()">绑定账户</a-button>
        </div>
      </div>

    </a-modal>
  </div>
</template>

<script>
import { getBusinessAccountInfo, getFundSubBalance, getProtocolType, getQsbFundWithdraw } from '@api/account'
import { cloneObject, conversionBranch, conversionElement,encryptIt } from '@/utils/util'

export default {
  name: 'accountWithdrawal',
  data(){
    return{
      my:null,
      myTest:'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCs7eVl3hduxnpyKhwI27seelA6cfr0ghTFVsMuaFW68KDa0Xv3NANEQ1YjWYVM/AUllHSDq0ORdIGm2suKCsmGuLnDK1TK7LbOZLgvkDz+Ft+06Y0ZzjILzl0SUtawE+fD6dpebAeD+dOAcl9EzU536ASLx0rsziOZIwcN3aWx5wIDAQAB',
      myPro:'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDpIyqMNYBRzfwVhL+P6jav7rGkNZQ0nu+7G7qe1g7mThM9D6Dc717sN1ATDgPxJzgI+NEQ+wx2B1HpUcs4pigyXbnL96qgHrsTe6ZX9YyicsaLz5FM7nujypfVAkfr/VQLEA8z9L7XsAh+Hm6g0WCdSPqdWHY0lS0ImOXth3PgjwIDAQAB',
      form:{
        withdrawAmount:null,
        password:null
      },
      value: 1,
      balance:null,
      visible:false,
      autoCom: 'off',
      inputType:'text',
      infoDetails:{},
      labelCol: { span: 3 },
      wrapperCol: { span: 15 },
      protocolType:null,
      validatorRules:{
        withdrawAmount:[{ required: true, message: '请输入提现金额!' }],
        password:[{ required: true, message: '请输入支付密码!' }],
      },
    }
  },
  created() {
    this.getFundSubBalanceFun();
    this.getBusinessAccountInfoFun();
    this.getProtocolTypeFun();
  },
  methods:{
    //查询总包分包
    getProtocolTypeFun(){
      getProtocolType().then(res => {
        if (res.success) {
          this.protocolType = res.result;
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    //密码不自动带入浏览器保存
    changeInputType(e){
      if(e.target.value !=''){
        this.inputType = 'password'
        this.autoCom = 'new-password'
      }else{
        this.inputType = 'text'
        this.autoCom = 'off'
      }
    },
    //余额查询
    getFundSubBalanceFun(){
      let params = {};
      params.clientType = 2;  //1企业  2渠道
      getFundSubBalance(params).then(res => {
        if (res.success) {
          let data = res.result;
          this.balance = data.balance;
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    //选择提现类型  1、渠道，2、企业
    onChange(e) {
      // console.log('radio checked', e.target.value);
      if( e.target.value == 1){
        this.value = 1;
      }else if(e.target.value == 2){
        this.value = 2;
      }
    },
    handleCancel(){
      this.visible = false;
      this.form.withdrawAmount = null;
      this.form.password = null;
    },
    //下一步事件
    withdrawalEventFun(type){
      if(type ==1){
        this.visible = true;
      }else if(type == 2){
        this.$router.push({
          path: '/myAccount/entWithdrawal',
        });

      }
    },
    //获取企业列表
    //确认提现事件
    confirmWithdrawal(){
      if(this.value ==1){
        this.getQsbFundWithdrawFun()
      }else{
        console.log(this.value)
      }
    },
    //提现请求后台
    getQsbFundWithdrawFun(entId){
      let params = {};
      params = cloneObject(this.form);
      if(process.env.VUE_APP_MY_STR == 'test'){
        this.my = this.myTest
        params.password = encryptIt(this.my,params.password)
      }else if(process.env.VUE_APP_MY_STR == 'pro'){
        this.my = this.myPro
        params.password = encryptIt(this.my,params.password)
      }
      params.withdrawAmount = conversionBranch(params.withdrawAmount);
      if (params.withdrawAmount < 1){
        this.$message.warning('提现金额不能小于一分');
      }else{
        //1渠道账户 2企业账户
        if(entId){
          params.entId = entId
        }

        getQsbFundWithdraw(params).then(res => {
          if (res.success) {
            this.$message.success('提现成功！')
            this.visible = false;
          }else{
            this.$message.warning(res.message);
          }
        })
      }
    },
    //提现拉取账户信息
    getBusinessAccountInfoFun(){
      let params = {};
      //1渠道账户 2企业账户
      params.masterType = 1;

      getBusinessAccountInfo(params).then(res => {
        if (res.success) {
          // // 赋值表格数据
          this.infoDetails = res.result;

          this.loading = false;
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    //提现复制
    withdrawalCopy(){
      this.form.withdrawAmount = Math.round(this.balance * 100)/10000
    },
    goTo(){
      this.$router.push({
        path: '/myAccount/entAccountManagementAdd',
        query: {
          masterType: 1
        }
      });
    }
  }
}
</script>

<style scoped lang='less'>
.content{
  background: #fff;
  box-sizing: border-box;
  padding: 20px;
  .title{
    font-size: 20px;
    font-weight: 600;
    color: #222;
    padding: 10px 0 30px;
    border-bottom: 1px solid #ccc;
  }
  .container-div{
    border-bottom: 1px solid #ccc;
  .container-title{
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    padding:20px 0;
  }
  .balance{
    font-size: 18px;
    color: #4167E8;
  }
}
}
.bank-card-info{
  display: flex;
  justify-items: self-end;
  padding: 14px;
  box-sizing: border-box;
  background: #e8e8e8;
  .left{
    width: 120px;
  }
  .right{
    font-size: 20px;
    color: #000;
    margin-top: -5px;
  }
  .text{
    font-size: 12px;
    color: #333;
  }
}
/deep/.ant-modal-title {
  text-align: left;
  font-weight: bold;
  font-size: 18px;
}
.s /deep/ .ant-input{
  border: none;
  box-shadow:none;
  font-size: 24px;
  color: #000;
  border-bottom: 1px solid #e8e8e8;
  padding: 10px 0;
  box-sizing: initial;
  margin-top: -6px;
}
/deep/.ant-input-affix-wrapper .ant-input:not(:first-child) {
  padding-left: 45px;
}
.balance-span{
  font-size: 20px;
  color: #ee9900;
}
</style>
